<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Mesh Atlas</title>
    <link rel="stylesheet" href="light.css" />
  </head>
  <body>
    <noscript>
      <strong
        >niivue doesn't work properly without JavaScript enabled. Please enable
        it to continue.</strong
      >
    </noscript>
    <header>
      <label for="decimateSelect">Decimate</label>
      <select id="decimateSelect">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7" selected>7</option>
      </select>
      <label for="meshSlider">Atlas transparency</label>
      <input
        type="range"
        min="0"
        max="255"
        value="127"
        class="slider"
        id="meshSlider"
      />
      <label for="meshSlider2">Statistical transparency</label>
      <input
        type="range"
        min="0"
        max="255"
        value="255"
        class="slider"
        id="meshSlider2"
      />
      <label for="atlasOutlineDrop">Atlas outline</label>
      <select id="atlasOutlineDrop">
        <option value="0" selected>None</option>
        <option value="1" >Opaque</option>
        <option value="-1">Black</option>
      </select>
      <label for="statsOutlineDrop">Statistical outline</label>
      <select id="statsOutlineDrop">
        <option value="0" selected>None</option>
        <option value="1" >Opaque</option>
        <option value="-1">Black</option>
      </select>
      &nbsp;
      <label for="dpiCheck">HighDPI</label>
      <input type="checkbox" id="dpiCheck" checked />
      &nbsp;
      <label for="legendCheck">Legend</label>
      <input type="checkbox" id="legendCheck" checked />
      &nbsp;
      <label for="crossCheck">Crosshairs</label>
      <input type="checkbox" id="crossCheck" checked />
      &nbsp;
      <button id="leftBtn">Left</button>
      <button id="rightBtn">Right</button>
      <button id="postBtn">Posterior</button>
      <button id="antBtn">Anertior</button>
      <button id="infBtn">Inferior</button>
      <button id="supBtn">Superior</button>
    </header>
    <main id="container">
      <canvas id="gl1"></canvas>
    </main>
    <footer>
      <p id="shaders">Shaders:<button id="gridBtn">Custom: Grid</button></p>
      <button id="customShaderBtn">Use custom shader:</button>
      <textarea id="customText" name="customText" rows="4" cols="50">
#version 300 es&#10;precision highp int;&#10;precision highp float;&#10;uniform float opacity;&#10;in vec4 vClr;&#10;in vec3 vN, vL, vV;&#10;out vec4 color;&#10;void main() {&#10; vec3 r = vec3(0.0, 0.0, 1.0); //rayDir: for orthographic projections moving in Z direction (no need for normal matrix)&#10; float ambient = 0.35;&#10; float diffuse = 0.5;&#10; vec3 n = normalize(vN);&#10; vec3 l = normalize(vec3(0.0, 10.0, -5.0));&#10; float lightNormDot = dot(n, l);&#10; vec3 a = vClr.rgb * ambient;&#10; vec3 d = max(lightNormDot, 0.0) * vClr.rgb * diffuse;&#10; color = vec4(a + d, opacity);&#10;}</textarea
      >
    </footer>
  </body>
</html>
<script type="module" async>
  import * as niivue from "../dist/index.js"
const fragMeshGridShader = `#version 300 es
precision highp int;
precision highp float;
uniform float opacity;
in vec4 vClr, vP;
in vec3 vN;
out vec4 color;
void main() {
	float GridSpacing = 20.0;
	float WireWidth = 0.12;
	float o = GridSpacing * WireWidth * 0.5;
	float xDx = mod(vP.x, GridSpacing);
	float yDx = mod(vP.y, GridSpacing);
	float zDx = mod(vP.z, GridSpacing);
	float minDx = min(min(xDx, yDx), zDx);
	if ( ( GridSpacing * WireWidth) < minDx) discard;
	
	vec3 r = vec3(0.0, 0.0, 1.0); //rayDir: for orthographic projections moving in Z direction (no need for normal matrix)
	float ambient = 0.35;
	float diffuse = 0.5;
	float specular = 0.2;
	float shininess = 10.0;
	vec3 n = normalize(vN);
	vec3 lightPosition = vec3(0.0, 10.0, -5.0);
	vec3 l = normalize(lightPosition);
	float lightNormDot = dot(n, l);
	vec3 a = vClr.rgb * ambient;
	vec3 d = max(lightNormDot, 0.0) * vClr.rgb * diffuse;
	float s = specular * pow(max(dot(reflect(l, n), r), 0.0), shininess);
	color = vec4(a + d + s, opacity);
}`
  leftBtn.onclick = async function () {
    nv1.setRenderAzimuthElevation(90, 0)
  }
  rightBtn.onclick = async function () {
    nv1.setRenderAzimuthElevation(270, 0)
  }
  postBtn.onclick = async function () {
    nv1.setRenderAzimuthElevation(0, 0)
  }
  antBtn.onclick = async function () {
    nv1.setRenderAzimuthElevation(180, 0)
  }
  infBtn.onclick = async function () {
    nv1.setRenderAzimuthElevation(180, -90)
  }
  supBtn.onclick = async function () {
    nv1.setRenderAzimuthElevation(0, 90)
  }
  decimateSelect.onchange = async function () {
    nv1.decimateHierarchicalMesh(nv1.meshes[0].id, decimateSelect.selectedIndex)
    for (let i = decimateSelect.options.length - 1; i > decimateSelect.selectedIndex; i--) {
      decimateSelect.remove(i);
    }
  }
  meshSlider.oninput = function () {
    nv1.setMeshLayerProperty(
      nv1.meshes[0].id,
      1,
      "opacity",
      this.value / 255.0
    )
  }
  meshSlider2.oninput = function () {
    nv1.setMeshLayerProperty(
      nv1.meshes[0].id,
      2,
      "opacity",
      this.value / 255.0
    )
  }
  dpiCheck.onclick = function () {
    nv1.setHighResolutionCapable(this.checked)
  }
  legendCheck.onchange = function () {
    nv1.opts.showLegend = this.checked
    nv1.drawScene()
  }
  crossCheck.onchange = function () {
    nv1.opts.show3Dcrosshair = this.checked
    nv1.drawScene()
  }
  atlasOutlineDrop.onchange = function () {
    nv1.setMeshLayerProperty(nv1.meshes[0].id, 1, "outlineBorder", parseInt(this.value)) 
  }
  statsOutlineDrop.onchange = function () {
    nv1.setMeshLayerProperty(nv1.meshes[0].id, 2, "outlineBorder", parseInt(this.value)) 
  }
  customShaderBtn.onclick = function () {
    let idx = nv1.setCustomMeshShader(
      document.getElementById("customText").value
    )
    let id = nv1.meshes[0].id
    nv1.setMeshShader(id, idx)
  }
  gridBtn.onclick = function () {
    let idx = nv1.setCustomMeshShader(fragMeshGridShader)
    let id = nv1.meshes[0].id
    nv1.setMeshShader(id, idx)
  }
  var nv1 = new niivue.Niivue({
    show3Dcrosshair: true,
    backColor: [0.9, 0.9, 1, 1],
  })
  nv1.setSliceType(nv1.sliceTypeRender)
  await nv1.attachTo("gl1")
  nv1.opts.showLegend = false
  var meshLayersList1 = [
    {
      url: "../images/lh.curv",
      colormap: "gray",
      cal_min: 0.3,
      cal_max: 0.5,
      opacity: 1,
    },
    { url: "../images/boggle.lh.annot", colormap: "rocket", opacity: 0.5 },
    {
      url: "../images/pval.LH.nii.gz",
      cal_min: 25,
      cal_max: 35.0,
      opacity: 0.9,
    },
  ]
  await nv1.loadMeshes([
    {
      url: "../images/lh.pial",
      rgba255: [255, 255, 255, 255],
      layers: meshLayersList1,
    },
    {url: "../images/CIT168.mz3", rgba255 : [0, 0, 255, 255]},
  ])
  let cmaps = nv1.meshShaderNames()
  let cmapEl = document.getElementById("shaders")
  for (let i = 0; i < cmaps.length; i++) {
    let btn = document.createElement("button")
    btn.innerHTML = cmaps[i]
    btn.onclick = function () {
      nv1.setMeshShader(nv1.meshes[0].id, cmaps[i])
    }
    cmapEl.appendChild(btn)
  }
</script>
